<!DOCTYPE html >
<html>
<head>
<meta name="Generator" content="TPshop v1.1" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>AI</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link rel="stylesheet" href="../css/footer.css">
<link rel="stylesheet" href="../css/font_footer/iconfont.css">

<link rel="stylesheet" type="text/css" href="../js/time/DateTimePicker.css" />

<style type="text/css">
	body,html{
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		overflow-x: hidden;
		position:relative;
	}
	#tuandel1{
		font-size: 22px;
	}
	/*时间*/
	#footer{
		width: 100%;
		height: 50px;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	.first{
		width: 80%;
		height: 35px;
		margin:10px 10%;
		display: flex;
	}

	.parallelogram { 
		width: 33.33%; 
		height: 35px; 
		/*margin-left:20px; */
		-webkit-transform: skew(-20deg); 
		-moz-transform: skew(-20deg); 
		-o-transform: skew(-20deg); 
		background: #eee; 
	} 
	/*#parallelogram1{
		margin-left:20px;
	}*/
	.firsts{
		width: 80%;
		height: 35px;
		/*margin:-45px 0 0 10%;*/
		position: absolute;
		top: 10px;
		left: 10%;
		display: flex;
		/*z-index: 999*/
	}
/*	#footer{
		width: 100%;
		height: 50px;
		position: fixed;
		bottom: 0;
		left: 0;
	}*/
	.time{
		width: calc(100% - 20px);
		padding: 0 10px;
	}
	.timeP{
		line-height: 20px;

	}
	.timeY{
		width: 90%;
		height: 155px;
		border-radius: 5px;
		border:1px solid #ccc;
		margin:15px 5%;
	}
	.timeYT{
		width: 100%;
		height: 120px;
		display: flex;
	}
	.timeYTL,.timeYTB{
		width: 35%;
		height: 100%;
		text-align: center;
	}
	.timeYTC{
		width: 30%;
		height: 100%;
	}
	.timeK{
		width: 100%;
		height: 30px;
	}
	.shu,.timeJ{
		margin:0;
		font-size: 1rem;
		line-height: 25px;
		text-align: center;

	}
	.shu{
		font-weight: bold;
	}
	.timeYB{
		border-top: 1px solid #ccc;
		width: 100%;
		display: flex;
	}
	.timeYBL{
		width: 50px;
	}
	.timeYBC{
		width: calc(100% - 80px);
		line-height: 35px;
		color:#1963AA;
		overflow: hidden;
	    text-overflow:ellipsis;
	    white-space: nowrap;
	}
	.timeYBR{
		width: 30px;
	}
	.imgL{
		width: 25px;
		height: 25px;
		margin: 5px 0 0 20px;
	}
	.imgR{
		width: 11px;
		height: 20px;
		margin: 8px 0 0 0;
	}
	.timeB{
		width: 90%;
		height: 155px;
		border-radius: 5px;
		border:1px solid #ccc;
		margin:15px 5%;
	}
	.timeBT{
		width: calc(100% - 20px);
		height: 120px;
		padding: 0 10px;
		display: inline-block;
	}
	.timeBB{
		border-top: 1px solid #ccc;
		width: 100%;
		display: flex;
	}
	.timeBBC{
		width: calc(100% - 30px);
		line-height: 35px;
		color:#1963AA;
		text-indent: 20px;
		overflow: hidden;
	    text-overflow:ellipsis;
	    white-space: nowrap;
	}
	.timeBBR{
		width: 30px;
	}
	.noneP{
		line-height: 30px;
		font-size: 1rem;
		text-align: center;
		margin-top:10px;
		color: #333333;
	}
	.chuang{
		color:#1963AA;
		line-height: 30px;
		font-size: 1rem;
		text-align: center;
	}
	.timeYes{
		width: 90%;
		height: 120px;
		padding: 0 5%;
	}
	.tou{
		display: inline-block;
		color:#444444;
		font-size: 13px;
		line-height: 25px;
		margin-top: 15px;
	}
	.mission{
		/*border-top: 1px solid #ccc;*/
		width: 100%;
		display: flex;
	}
	.missionImg{
		width: 30px;
	}
	.missionFont{
		width: calc(100% - 80px);
		line-height: 30px;
		overflow: hidden;
	    text-overflow:ellipsis;
	    white-space: nowrap;
	}
	.missionJin{
		width: 50px;
		line-height: 30px;
		text-align: right;
		color:#444444;
	}
	.missionImg img{
		width: 20px;
		height: 20px;
		margin: 5px 0 0 0px;
	}
	.foncolors{
		width: 33.33%;
		line-height: 35px;
		text-align: center;
	}
	.baccolor{
		background: #1963AA;
	}
	.foncolor{
		color:#fff;
	}
/*	.centerTime{
		display: none;
	}
	.centerBehavior{
		display: none;
	}
	.centerPeoper{
		display: none;
	}*/

	/*人*/
	.top{
		width: calc(100% - 20px);
		padding: 0 10px;
		display: flex;
		border-bottom: 1px solid #eee;
	}
	.topL{
		width: calc(100% - 30px);
		line-height: 40px;
		overflow: hidden;
	    text-overflow:ellipsis;
	    white-space: nowrap;
	}
	.topR{
		margin-top: 7px;
		width: 26px;
		height: 26px;
		display: inline-block;
	}
	.topR img{
		width: 100%;
		height: 100%;
	}
	.center{
		width: 100%;
	}
	.one{
		width: 100%;
		padding: 10px 10px;
		display: flex;
		border-bottom: 1px solid #eee;
	}
	.ongImg{
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}
	.ongImg img{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.oneName{
		width: calc(100% - 70px);
		line-height: 40px;
		text-indent: 10px;
		overflow: hidden;
	    text-overflow:ellipsis;
	    white-space: nowrap;
	}
	.shuPeoper{
		line-height: 40px;
		text-align: center;
		color: #ccc;

	}

	/*行为*/
	.behaviorC{
		width: calc(100% - 22px);
		padding: 0 10px;
	}
	.behaviorCZ{
		width: 100%;
		border:1px solid #ccc;
		border-radius: 5px;
	}
	.behhe{
		width: calc(50% - 4px);
		height: 80px;
		display: inline-block;
	}
	.behZ{
		width: 96px;
		height: 26px;
		margin: auto;
		vertical-align: middle;
		display: flex;
	}
	.behImg{
		width: 26px;
		height: 23px;
	}
	.behImg img{
		width: 100%;
		height: 100%;
	}
	.berFont{
		line-height: 23px;
		text-indent: 5px;
	}
	.bhz1{
		padding-top: 37px;
	}
	.bhz2{
		padding-top: 17px;
	}
	.behaviorOne{
		width: calc(100% - 20px);
		display: flex;
		padding: 10px 10px;
		border-bottom:1px solid #eaeaea;
	}
	.behaviorOne1{
		width: 35px;
		text-align: center;
	}
	.behaviorOne1 img{
		width: 25px;
		height: 25px;
		margin: 5px 0 0 5px;
	}
	.behaviorOne2{
		width: calc(100% - 70px);
		line-height: 35px;
		text-indent: 10px;
	}
	.behaviorOne3{
		width: 35px;
		text-align: right;
		line-height: 35px;
	}

	/**/
	.xuan{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: fixed;
		top: 0;
		margin: 0;
		display: none;
	}
	.xuanN{
		width: 90%;
		height: 180px;
		margin-top: calc(50% - 0px);
		margin-left: 5%;
		background: #fff;
		border:1px solid #ccc;
	}
	.xuanT{
		line-height: 50px;
		text-align: center;
	}
	.xuanC{
		margin-top: 20px;
		text-align: center;
	}

	.xuabIpute{
		width: 40%;
		height: 30px;
		text-align: center;
	}
	.divBtn{
		/*width: calc(100% - 20px);*/
		width: 100%;
		height: 45px;
		margin-top:30px;
		display: flex;
		/*padding: 0 10%;*/
	}
	.btns{
		width: 20%;
		height: 35px;
		text-align: center;
		line-height: 35px;
		border-radius: 3px;
		margin:0 15%;
	}
	.btnNo{
		/*border:1px solid #ccc;*/
	}
	.btnYeso{
		/*background: #1963AA;*/
		color:#1963AA;
	}




</style>

</head>
<body>
    <div class="first">
		<div id="parallelogram0" class="parallelogram baccolor"></div>
		<div id="parallelogram1" class="parallelogram"></div>
		<div id="parallelogram2" class="parallelogram"></div>
    </div>
    <div class="firsts">
		<a href="#centerTime" id="foncolor0" class="foncolors foncolor">时间</a>
		<a href="#centerBehavior" id="foncolor1" class="foncolors">行为</a>
		<a href="#centerPeoper" id="foncolor2" class="foncolors">人</a>
    </div>
    <div class="firstTime"></div>
    <div class="centerTime">
    	<div class="time">
			<p class="timeP"><span class="zuo">昨天</span><span class="times">21:00</span></p>
			<div class="timeY">
				<div class="timeYT">
					<div class="timeYTL">
						<div class="timeK"></div>
						<p class="shu">3</p>
						<p class="timeJ">名次</p>
					</div>
					<div class="timeYTC"></div>
					<div class="timeYTR">
						<div class="timeK"></div>
						<p class="shu">3</p>
						<p class="timeJ">当日客户数</p>
					</div>
				</div>
				<div class="timeYB" onclick="window.location.href='https://business.17jxyx.com/AI_radar/index/assignment/ranking.html'">
					<div class="timeYBL">
						<img src="../image/footer/tp.png" class="imgL" alt="">
					</div>
					<div class="timeYBC">新华杨</div>
					<div class="timeYBR">
						<img src="../image/footer/yjt.png" class="imgR" alt="">
					</div>

				</div>
			</div>
			<p class="timeP">任务小助手</p>
			<div class="timeB">
				<div class="timeBT">
					<p class="noneP">今天暂无任务</p>
					<p class="chuP"><span class="chuang">创建任务</span>有助于管理自己的营销计划</p>
				</div>
				<!-- <div class="timeYes">
					<p class="tou">你今日有<span class="timeNums">2</span>个任务待完成</p>
					<div class="mission" onclick="window.location.href='https://business.17jxyx.com/AI_radar/index/assignment/index.html'">
						<div class="missionImg">
							<img src="../image/time/rw.png" alt="">
						</div>
						<div class="missionFont">任务1</div>
						<div class="missionJin">11:52</div>
					</div>
					<div class="mission">
						<div class="missionImg">
							<img src="../image/time/rw.png" alt="">
						</div>
						<div class="missionFont">发生的故事的发生地方v分v后</div>
						<div class="missionJin">11:52</div>
					</div>
				</div> -->
				<div class="timeBB">
					<div class="timeBBC" onclick="window.location.href='https://business.17jxyx.com/AI_radar/index/time/mission.html'">查看全部任务</div>
					<div class="timeBBR">
						<img src="../image/footer/yjt.png" class="imgR" alt="">
					</div>

				</div>
			</div>
	    </div>
	    <div class="asdasd">实验000</div>
    </div>
    <div class="centerBehavior">
    	<div class="top">
    		<div class="topL">七天内被查看的行为统计</div>
    		<div class="topR"><img src="../image/time/rl.png" alt=""></div>
    	</div>
    	<div class="behaviorC">
    		<div class="behaviorCZ">
    			<div class="behhe behaviorC1">
    				<div class="behZ bhz1" onclick="window.location.href='https://business.17jxyx.com/AI_radar/index/behavior/seedetails.html'">
    					<div class="behImg"><img src="../image/time/sp.png" alt=""></div>
    					<div class="berFont">查看商品</div>
    				</div>
    			</div>
    			<div class="behhe behaviorC2">
    				<div class="behZ bhz1">
    					<div class="behImg"><img src="../image/time/dn.png" alt=""></div>
    					<div class="berFont">查看官网</div>
    				</div>
    			</div>
    			<div class="behhe behaviorC3">
    				<div class="behZ bhz2">
    					<div class="behImg"><img src="../image/time/wx.png" alt=""></div>
    					<div class="berFont">复制微信</div>
    				</div>
    			</div>
    			<div class="behhe behaviorC4">
    				<div class="behZ bhz2">
    					<div class="behImg"><img src="../image/time/mp.png" alt=""></div>
    					<div class="berFont">转发名片</div>
    				</div>
    			</div>
    		</div>
    	</div>
    	<div class="behaviorBot">
    		<div class="behaviorOne">
    			<div class="behaviorOne1">
    				<img src="../image/time/cktb.png" alt="">
    			</div>
    			<div class="behaviorOne2">查看名片</div>
    			<div class="behaviorOne3">0</div>
    		</div>
    		<div class="behaviorOne">
    			<div class="behaviorOne1">
    				<img src="../image/time/tc1.png" alt="">
    			</div>
    			<div class="behaviorOne2">查看动态</div>
    			<div class="behaviorOne3">0</div>
    		</div>
    		<div class="behaviorOne">
    			<div class="behaviorOne1">
    				<img src="../image/time/tcs2.png" alt="">
    			</div>
    			<div class="behaviorOne2">资讯产品</div>
    			<div class="behaviorOne3">0</div>
    		</div>
    		<div class="behaviorOne">
    			<div class="behaviorOne1">
    				<img src="../image/time/tc3.png" alt="">
    			</div>
    			<div class="behaviorOne2">保留电话</div>
    			<div class="behaviorOne3">0</div>
    		</div>
    		<div class="behaviorOne">
    			<div class="behaviorOne1">
    				<img src="../image/time/tc4.png" alt="">
    			</div>
    			<div class="behaviorOne2">觉得靠谱</div>
    			<div class="behaviorOne3">0</div>
    		</div>
    		<div class="behaviorOne">
    			<div class="behaviorOne1">
    				<img src="../image/time/tc5.png" alt="">
    			</div>
    			<div class="behaviorOne2">拨打电话</div>
    			<div class="behaviorOne3">0</div>
    		</div>
    		<div class="behaviorOne">
    			<div class="behaviorOne1">
    				<img src="../image/time/tc6.png" alt="">
    			</div>
    			<div class="behaviorOne2">播放语音</div>
    			<div class="behaviorOne3">0</div>
    		</div>

    		<div class="behaviorOne">
    			<div class="behaviorOne1">
    				<img src="../image/time/tc7.png" alt="">
    			</div>
    			<div class="behaviorOne2">复制邮箱</div>
    			<div class="behaviorOne3">0</div>
    		</div>
    		
    	</div>
    </div>
    <div class="centerPeoper">
    	<div class="top">
    		<div class="topL">七天内被查看的行为统计</div>
    		<div class="topR"><img src="../image/time/rl.png" alt=""></div>
    	</div>
    	<div class="center">
	    	<div class="one">
	    		<div class="ongImg">
	    			<img src="../image/time/jia.png" alt="">
	    		</div>
	    		<div class="oneName">刚好发生</div>
	    	</div>
	    	<p class="shuPeoper">没有更多数据了</p>
    	</div>
    </div>
	<!-- <div style="height:60px; line-height:60px; clear:both;"></div> -->

<!--     <div id="footer"></div> -->
    <div class="xuan">
    	<div class="xuanN">
    		<div class="xuanT">选择时间段</div>
    		<div class="xuanC">
    			<input type="text" class="xuabIpute qian" data-field="date" readonly> 至 <input type="text" class="xuabIpute hou" data-field="date" readonly>
    		</div>
    		<div class="divBtn">
	    		<div class="btnNo btns">取消</div>
	    		<div class="btnYeso btns">确定</div>
	    	</div>
    	</div>
    </div>
	<div id="dtBox"></div>

    <!-- <include file="footer.html"/> -->
<!-- <script src='../js/jquery.js'></script> -->
<script type="text/javascript" src="../js/time/DateTimePicker.js"></script>
<script type="text/javascript">


	$(".asdasd").click(function(){
		var sa = "dfgsdas"
		var dd = "<div>新加"+sa+"</div>"
		console.log($($(".timeP")[0]))
		console.log($(".timeP"))

		$($(".timeP")[0]).before(dd)
	})
	var tests = window.location.href;
	// console.log(tests)
	var far1 = tests.indexOf('.html');
	var far3 = far1 + 6;
	far = tests.slice(far3);
	 if(far == '' || far == "index" || far == "centerTime"){
        	// console.log(1111)

        	$(".centerTime").css("display","block")
        	$(".firstTime").css("display","block")
		 	$(".centerBehavior").css("display","none")
		 	$(".centerPeoper").css("display","none")
		 	$("#foncolor0").addClass("foncolor")
		 	$("#foncolor1").removeClass("foncolor")
		 	$("#foncolor2").removeClass("foncolor")
		 	$("#parallelogram0").addClass("baccolor")
		 	$("#parallelogram1").removeClass("baccolor")
		 	$("#parallelogram2").removeClass("baccolor")

        }
        if(far == "centerBehavior"){
        	// console.log(2222)
        	$(".centerTime").css("display","none")
        	$(".firstTime").css("display","none")
		 	$(".centerBehavior").css("display","block")
		 	$(".centerPeoper").css("display","none")
		 	$("#foncolor0").removeClass("foncolor")
		 	$("#foncolor1").addClass("foncolor")
		 	$("#foncolor2").removeClass("foncolor")
		 	$("#parallelogram0").removeClass("baccolor")
		 	$("#parallelogram1").addClass("baccolor")
		 	$("#parallelogram2").removeClass("baccolor")

        }
        if(far == "centerPeoper"){
        	console.log($(".firstTime"))
        	$(".centerTime").css("display","none")
        	$(".firstTime").css("display","none")
		 	$(".centerBehavior").css("display","none")
		 	$(".centerPeoper").css("display","block")
		 	$("#foncolor0").removeClass("foncolor")
		 	$("#foncolor1").removeClass("foncolor")
		 	$("#foncolor2").addClass("foncolor")
		 	$("#parallelogram0").removeClass("baccolor")
		 	$("#parallelogram1").removeClass("baccolor")
		 	$("#parallelogram2").addClass("baccolor")

        }
	 // $("#footer").load("footer.html");
	 // $(".centerTime").load("time/index.html");
	 // $("#foncolor0").click(function(){
	 // 	console.log(111)
	 // 	$(".centerTime").css("display","block")
	 // 	$(".centerBehavior").css("display","none")
	 // 	$(".centerPeoper").css("display","none")
	 // 	// $(".centerTime").load("time/index.html");
	 // })
	 // $("#foncolor1").click(function(){
	 // 	console.log(2222)
	 // 	$(".centerTime").css("display","none")
	 // 	$(".centerBehavior").css("display","block")
	 // 	$(".centerPeoper").css("display","none")
	 // 	// $(".centerBehavior").load("behavior/index.html")
	 // })
	 // $("#foncolor2").click(function(){
	 // 	console.log(333)
	 // 	$(".centerTime").css("display","none")
	 // 	$(".centerBehavior").css("display","none")
	 // 	$(".centerPeoper").css("display","block")
	 // 	// $(".centerPeoper").load("peoper/index.html")
	 // })

	 //取消
	 $(".btnNo").click(function(){
	 	$(".xuan").css("display","none")
	 })
	 //确定
	 $(".btnYeso").click(function(){
	 	var qian = $(".qian").val()
	 	var hou = $(".hou").val()
	 	console.log(qian,hou)

	 })
	 //选择时间
	 $(".topR").click(function(){

	    $(".xuan").css("display","block")
	 })
	 //选择时间弹出框
	 $("#dtBox").DateTimePicker({

		init: function()
		{
			var oDTP = this;
			oDTP.setDateTimeStringInInputField();
		}

	});

	// console.log($)
	// var parallelogram = document.querySelectorAll(".foncolors")
	// Array.from(parallelogram).forEach(function(topa,topb){
	// 	topa.onclick = function(){
	// 		// console.log(11111111111)
	// 		Array.from(parallelogram).forEach(function(topc,topd){
	// 			topc.classList.remove("foncolor")
	// 			$("#parallelogram" + topd).removeClass("baccolor")
	// 			// topc.childNodes[1].childNodes[1].src = "../image/top/h"+topd+".png"
	// 		})
	// 		topa.classList.add("foncolor")
	// 		$("#parallelogram" + topb).addClass("baccolor")

	// 		// topa.childNodes[1].childNodes[1].src = "../image/top/l"+topb+".png"
	// 		// console.log(topa.childNodes[1].childNodes[1])
	// 	}
	// })
</script>
</body>
</html>